<!DOCTYPE html>
<html>

<head>
    <title>Echarts</title>
    <!--=include _head.html -->
    <script src="../libs/echarts/echarts.min.js"></script>
</head>
<!-- 
        以用户运营角度，常用图形级意义：
        1、折线图、看走势、绘制多条线时可以看走势对比，例如今日新增&昨日新增&上周今日新增等！
        2、柱状、看分布、用户年龄段分布，绘制多个柱状图可以行程对比、早上使用app年龄分布、中午使用app年龄分布、晚上使用app年龄分布
        3、在2中将柱状图可以修改为 堆砌柱状图，堆砌维度是 男、女
        4、饼图、看分布，主要是单一维度用户分布情况、比如用户使用操作系统分布；
        5、条形图、同柱状图
        6、漏斗图、看转化率
        7、桑基图、看用户路径
        8、热力图、看分布、例如网页哪个区域点击多、
        9、象形柱图、比柱图、饼图更形象，例如：人体含水量
 -->

<body class="fa-layout">
    <div class="layui-fluid">
        <blockquote class="layui-elem-quote">
            Echarts,满足日常常用的折线图、柱状图、饼图、漏斗图、热点图等<br />
            本页面以用户运营角度做了简单示例！
        </blockquote>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <div class="layui-card">
                    <div class="layui-card-header">单日新增用户</div>
                    <div class="layui-card-body ">
                        <div class="user-inc echart-line"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">用户设备分布</div>
                    <div class="layui-card-body ">
                        <div class="user-device echart-line"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <div class="layui-card">
                    <div class="layui-card-header">活跃用户年龄分布</div>
                    <div class="layui-card-body ">
                        <div class="user-act-age echart-line"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">市场进展</div>
                    <div class="layui-card-body ">
                        <div class="bd-qa echart-line"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">活跃热点图</div>
                    <div class="layui-card-body ">
                        <div class="user-act-map echart-line"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
<script type="text/javascript">
    fa.use(['fa_echart', 'fa_util'], function () {
        let kit = layui.fa_echart;
        let util = layui.fa_util;
        util.get('./data/user-inc.json', {}, (d) => {
            let options = kit.buildOpts("line", {
                xTitle: d.xAxis,
                series: d.series,
            });
            kit.echart('.user-inc', options);
        });

        util.get('data/user-act-age.json', {}, (d) => {
            let options = kit.buildOpts("bar", {
                data: d.series, xTitle: d.xAxis
            });
            kit.echart('.user-act-age', options);
        })
        util.get('data/user-device.json', {}, (d) => {
            let options = kit.buildOpts('pie', {
                name: d.title,
                data: d.data
            })
            kit.echart('.user-device', options);
        })
        util.get('data/bd-qa.json', {}, (d) => {
            let opts = kit.buildOpts('radar', {
                name: d.title,
                data: d.data,
                indicator: d.indicator
            })
            kit.echart('.bd-qa', opts);
        })
        util.get('data/user-act-map.json', {}, (d) => {
            let opts = kit.buildOpts('heatmap', {
                xTitle: d.hours,
                yTitle: d.days,
                min: 0,
                max: 10,
                name: d.title,
                data: d.data.map(item => [item[1], item[0], item[2] || '-']),
                label: true
            })
            kit.echart('.user-act-map', opts);
        })
    })
</script>

</html>